.app-container {
  background-color: $uni-bg-color-grey;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  .flex {
    display: flex;
  }
  .flex-1{
	  flex: 1;
  }
  .justify-between{
	  justify-content: space-between;
  }
  .items-center{
	  align-items: center;
  }
  .header {
    display: flex;
    align-items: center;
    background-color: $base;
    padding: 40rpx 20rpx 120rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: $uni-border-radius-circle;
      }
    }

    .pay-status {
      margin-left: 20rpx;
      color: $uni-text-color-inverse;
    }
	.count-down{
		font-size: $uni-font-size-sm;
		color: $uni-text-color-inverse;
	}
  }
  .fixed-footer{
	  position: fixed;
	  bottom: 0;
	  // bottom: env(safe-area-inset-bottom);
	  left: 0;
	  right: 0;
	  background-color: $uni-bg-color;
	  display: flex;
	  justify-content: flex-end;
	  padding: 20rpx 20rpx calc(constant(safe-area-inset-bottom) + 20rpx);
	  padding: 20rpx 20rpx calc(env(safe-area-inset-bottom) + 20rpx);
	  // padding-bottom: (safe-area-inset-bottom);
	  .btn{
		  border: 2rpx solid #eee;
		  font-size: $uni-font-size-base;
		  border-radius: 60rpx;
		  margin-right: 20rpx;
		  padding: 20rpx;
	  }
	  .primary-btn{
		  background-color: $base;
		  color: $uni-text-color-inverse;
		  font-size: $uni-font-size-base;
		  border-radius: 60rpx;
		  padding: 20rpx 40rpx;
	  }
  }
  .main {
    padding: 0 20rpx 40rpx;
    .address {
      background-color: $uni-bg-color;
      border-radius: 20rpx;
      padding: 40rpx 20rpx;
      margin-top: -80rpx;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
      .info {
        font-size: $uni-font-size-base;
      }
    }
    .goods {
      background-color: $uni-bg-color;
      border-radius: 20rpx;
      padding: 40rpx 20rpx;
      margin: 20rpx 0;
      .goods-item {
        image {
          width: 150rpx;
          height: 150rpx;
          margin-right: 20rpx;
          border-radius: $uni-border-radius-lg;
        }
        .basic-info {
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          .name {
            font-size: $uni-font-size-base;
            font-weight: bold;
          }
          .price-info,
          .count {
            align-self: flex-end;
          }
          .symbol {
            color: #f62c2c;
          }
          .price {
            color: #f62c2c;
          }
        }
      }
    }
    .order-info,
    .order-price {
      background-color: $uni-bg-color;
      border-radius: 20rpx;
      padding: 40rpx 20rpx;
      margin: 20rpx 0;
      font-size: $uni-font-size-base;
    }
    .order-info {
      .label {
        width: 30%;
      }
	  .service{
		  border-top: 4rpx solid #f8f8f8;
		  padding-top: 40rpx;
		  text-align: center;
	  }
    }

    .order-price {
      .justify-end {
        justify-content: flex-end;
      }
      .value {
        font-weight: bold;
      }
      .price {
        color: #f62c2c;
      }
    }
  }
  .shop {
    .guess {
      margin: 2rem 0;
      color: #4b4b4b;
      text-align: center;
    }
    .goodslist {
      margin: 0.4rem 0.8rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.7rem;
      .list {
        display: grid;
        border-radius: 0.4rem;
        overflow: hidden;
        background-color: #ffffff;
        box-shadow: 0px 0px 0px #afafaf;
        image {
          width: 100%;
          height: 10rem;
        }
        .container {
          padding: 0.5rem;
          font-size: 0.8rem;
          gap: 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .price-num {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .discount {
              color: #6c6c6c;
              text-decoration: line-through;
              font-size: 0.8rem;
            }
            .price {
              display: flex;
              align-items: flex-end;
              .min {
                color: #fc5227;
                font-size: 0.8rem;
              }
              .max {
                font-size: 1rem;
                color: #fc5227;
                font-weight: bold;
              }
            }
          }
          .action {
            display: flex;
            justify-content: space-between;
            .discount {
              color: #6c6c6c;
            }
            .btn-calculate {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 4rem;
              height: 1.5rem;
              background-color: $base;
              border-radius: 0.8rem;
              text {
                color: #ffffff;
                font-size: 0.8rem;
              }
            }
          }
        }
      }
    }
  }
}
